<script lang="ts" setup>
import { QDialog, QCard, QCardActions, QCardSection, QSpace, QForm, QBtn } from "quasar";

import { ComButtonIcon } from "../ComButton";

const vueProps = defineProps<{
  modelValue: boolean;
  readonly?: boolean;
}>();

const emit = defineEmits<{
  (event: "confirm"): void;
  (event: "close"): void;
  (event: "update:modelValue", bool: boolean): void;
}>();
</script>

<template>
  <q-dialog
    :model-value="vueProps.modelValue"
    persistent
    transition-show="jump-down"
    transition-hide="jump-up"
    backdrop-filter="blur(8px)"
    @update:model-value="(d) => emit('update:modelValue', d)"
  >
    <div class="w-full">
      <q-card class="w-96 mx-auto rounded">
        <q-card-section class="text-lg flex items-center gap-3">
          <slot name="title"></slot>
          <q-space></q-space>
          <q-btn class="-mr-1.5" icon="close" flat round dense @click="emit('close')" />
        </q-card-section>

        <q-form class="flex flex-col flex-nowrap max-h-80vh" autofocus @submit="emit('confirm')">
          <q-card-section class="h-0 flex-1 py-0 flex-nowrap overflow-y-auto">
            <slot name="content"></slot>
          </q-card-section>

          <template v-if="vueProps.readonly">
            <div class="pb-3"></div>
          </template>
          <q-card-actions v-else align="right" class="pt-6">
            <slot name="left"></slot>
            <q-space></q-space>
            <ComButtonIcon flat @click="emit('close')">取消</ComButtonIcon>

            <q-btn type="submit" color="primary" class="rounded" unelevated>
              <slot name="label"></slot>
            </q-btn>
          </q-card-actions>
        </q-form>

        <!-- 一般用于 loading -->
        <slot></slot>
      </q-card>
    </div>
  </q-dialog>
</template>
